@extends('web.layout')

@section('style')
    @parent
    <link rel="stylesheet" type="text/css" href="{{ asset('static/less/page.css') }}?ver={{ config('app.asset_version') }}"/>

@stop

@section('script')
    @parent
    <script>
        function messageStore(){
            var job = $("input[name='job");
            var name = $("input[name='name");
            var date = $("input[name='date");
            var phone = $("input[name='phone']");
            var line = $("input[name='line']");
            var email = $("input[name='email']");
            var content = $("textarea[name='message']");
            if(!job.val()){
                job.focus();
                job.contip({
                    align: 'bottom',
                    html: '請填寫應徵職務',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(!name.val()){
                name.focus();
                name.contip({
                    align: 'bottom',
                    html: '請填寫姓名',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(!date.val()){
                date.focus();
                date.contip({
                    align: 'bottom',
                    html: '請填寫出生年月日',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(!phone.val()){
                phone.focus();
                phone.contip({
                    align: 'bottom',
                    html: '請填寫您的聯絡電話',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(!(/^09\d{8}$/.test(phone.val()))){
                phone.focus();
                phone.contip({
                    align: 'bottom',
                    html: '聯絡電話格式錯誤',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(!line.val()){
                line.focus();
                line.contip({
                    align: 'bottom',
                    html: '請填寫應徵職務',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(!email.val()){
                email.focus();
                email.contip({
                    align: 'bottom',
                    html: '請填寫您的電子郵箱',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }
            if(email.val().search(/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn|tw|info|net)$/) == -1){
                $("input[name='email']").focus();
                $('input[name="email"]').contip({
                    align: 'bottom',
                    html: '電子郵箱格式錯誤',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }

            if(!content.val()){
                content.focus()
                content.contip({
                    align: 'bottom',
                    html: '請填寫工作經歷',
                    fade: 360,
                    opacity:0.6,
                    delay_out:100,
                    trigger:'focus',
                    auto_close: 3000,
                    repeat:false,
                }).show();
                return false;
            }

            if($('.form-btn').attr('disabled')){
                return false;
            }
            addLoadingActionBtn('.form-btn');

            $.ajax({
                type: $('#recruit-form').attr('method'),
                url: $('#recruit-form').attr('action'),
                data: $('#recruit-form').serialize(),
                dataType: "json",
                success: function(data){
                    if (data.code == 200){
                        Swal.fire({
                            title: data.msg,
                            text: data.sub_msg,
                            icon: 'success',
                            confirmButtonText: '我知道了'
                        })

                        $("input[type='text'],input[type='email'],input[type='date'],input[type='tel'],textarea").val('');

                    }else{
                        Swal.fire({
                            title: data.msg,
                            text: data.sub_msg,
                            icon: 'error',
                            confirmButtonText: '我知道了'
                        })

                    }
                    closeLoadingActionBtn('.form-btn');
                },
                error:function(jqXHR, textStatus, errorThrown){
                    var response = JSON.parse(jqXHR.responseText)

                    Swal.fire({
                        title: "留言失敗!",
                        text: response.message,
                        icon: 'error',
                        confirmButtonText: '我知道了'
                    })
                    closeLoadingActionBtn('.form-btn');
                }
            });
            return false;
        }

        $('#recruit-form').submit(function(){
            messageStore();
            return false;
        })

    </script>


@stop
@section('topic-title',$page->title )
@section('breadcrumb')
    <ul class="breadcrumb">
        <li><a href="{{ url('/') }}">首頁</a></li>
        <li class="active">{{ $page->title }}</li>
    </ul>
@stop
@section('content')


    <div class="container">


        <div class="main">
            <div id="page-about">

                <div class="content">
                    {!! app('cache.config')->replace($page->content) !!}
                </div>
                
            </div>
            <div class="r-form">
                    <form action="" id="recruit-form" method="post">
                        {{ csrf_field() }}
                        <div class="form-wrap has-bg">
                            <div class="contact-title">
                                <i class="ic-notice"></i>CONTACT FORM
                                <div class="reminder">
                                    為了提供您更完善的服務，請務必輸入正確的資料，謝謝您。
                                    <b></b>為必填欄位
                                </div>
                            </div>
                            <div class="form-box">
                                <div class="form-group">
                                    <label for="" class="control-label required">應徵職務</label>
                                    <div class="control-box">
                                        <div class="input-box">
                                            <input class="form-control validate[required]" type="text" name="job" id="job" value="" >
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group name">
                                    <label class="control-label required">姓名</label>
                                    <div class="control-box">
                                        <input class="form-control validate[required]" type="text" name="name" id="name" value="">
                                        <div class="radio-box">
                                            <label class="form-radio checked"><input class="validate[required]" type="radio" name="sex" id="gender" value="1" checked=""> 先生</label>
                                            <label class="form-radio"><input class="validate[required]" type="radio" name="sex" id="gender" value="2"> 小姐</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="" class="control-label required">出生年月日</label>
                                    <div class="control-box">
                                        <div class="input-box">
                                            <input class="form-control validate[required,custom[date]] hasDatepicker" name="date"   type="date" value="" placeholder="YYYY-MM-DD">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label required">聯絡電話</label>
                                    <div class="control-box">
                                        <div class="input-box">
                                            <input class="form-control validate[required,custom[phone]]" type="tel" name="phone" id="phone" value="" placeholder="EX：0912345678">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label required">LINE ID</label>
                                    <div class="control-box">
                                        <div class="input-box">
                                            <input class="form-control validate[required]" type="text" name="line" id="line" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label required">E-mail</label>
                                    <div class="control-box">
                                        <div class="input-box">
                                            <input class="form-control validate[required,custom[email]]" type="email" name="email" id="email" value="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="control-label required">工作經歷</label>
                                    <div class="control-box">
                                        <div class="input-box">
                                            <textarea name="message" id="message" class="form-control validate[required]"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label required">驗證碼</label>
                                    <div class="control-box captcha">
                                        <input class="form-control  validate[required]" type="text" name="captcha" id="acode" value="">
                                        <a href="javascript:;"><img id="Imageid" src="{{ captcha_src() }}" style="width: 150px; height: 44px; border: 0;" alt=" " onclick="$(this).attr('src','{{ captcha_src() }}'+Math.random(1000,9999))"></a>
                                    </div>
                                </div>
                                <button type="submit" class="btn form-btn"><span>確認送出</span></button>
                            </div>
                        </div>
                    </form>
                </div>
        </div>
    </div>




@endsection
